<template>
    <div class="app-container" v-loading="loading">
        <levelbar></levelbar>
        <el-form label-width="80px" class="app-content form-box" :rules="rules"
        :model="ruleForm" ref="ruleForm">
            <div class="box">
                <div class="tea-infor">
                    <div class="form-title">添加教材</div>
                    <div class="form-item">
                         <div class="form-item-title">
                            <span class="title-level">教材名称</span>
                        </div>
                        <div class="form-content">
                          <el-row :gutter="20">
                            <el-col :span="12">
                                <el-form-item label="教材名称" prop="title" label-width="90px">
                                    <el-input v-model="ruleForm.title" placeholder="请输入教材名称" :maxlength="20"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="学科" prop="subjects">
                                    <el-select v-model="ruleForm.subjects" placeholder="请选择" style="width:100%;" >
                                        <el-option v-for="(item,index) in listSubjects" :key="index" :label="item.subjectName" 
                                        :value="item.subjectKey">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                          </el-row>
                           <el-row :gutter="20">
                            <el-col :span="12">
                                <el-form-item label="年级" prop="getGradeName" label-width="90px">
                                    <el-select v-model="ruleForm.getGradeName" placeholder="请选择" style="width:100%;" multiple>
                                        <el-option v-for="item in gradeList" :key="item.id" :label="item.name" :value="item.id">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="学年" prop="studyYear">
                                    <el-select v-model="ruleForm.studyYear" placeholder="请选择" style="width:100%;">
                                        <el-option v-for="item in studyYearList" :key="item.id" :label="item.name" :value="item.id">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                          </el-row>
                    </div>
                    </div>
                </div>
                <div class="form-item">
                    <div class="form-item-title">
                        <span class="title-level">教材目录</span>
                    </div>
                    <div class="form-content teaching" v-for="(item,index) in ruleForm.teachingList" :key="index">
                        <el-row :gutter="20">
                            <el-col :span="8">
                                <el-form-item label="单元名称" label-width="88px" :prop="'teachingList.' + index + '.unitName'" 
                                    :rules="[{required: true, message: '单元名称不能为空', trigger: 'blur,change'},{ pattern: /^[^\s]+$/, message: '请勿输入空格', trigger: 'blur,change' },]">
                                    <el-input v-model="item.unitName" placeholder="请输入单元名称" :disabled="item.status" :maxlength="20"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="2" class="btn">
                                <el-button @click="saveUnit(index)" v-if="!item.status">保存单元</el-button>
                            </el-col>
                            <el-col :span="2" class="btn">
                                <el-button @click="editUnit(index)" v-if="item.status">编辑单元</el-button>
                            </el-col>
                            <el-col :span="2" v-if="ruleForm.teachingList.length > 1">
                                <el-button @click="deleteUnit(index)">删除单元</el-button>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20" v-for="(temp,innerIndex) in item.chapters" :key="innerIndex">
                            <el-col :span="12">
                                <el-form-item label="课程名称" label-width="88px" :prop="'teachingList.' + index + '.chapters.' + innerIndex + '.chapterName'" 
                                    :rules="[{required: true, message: '课程名称不能为空', trigger: 'blur,change'},{ pattern: /^[^\s]+$/, message: '请勿输入空格', trigger: 'blur,change' },]">
                                    <el-input v-model="temp.chapterName" :disabled="item.status" placeholder="请输入课程名称" :maxlength="20"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="1">
                                <el-button class="delBtn btn" type="text" v-if="!item.status && item.chapters.length > 1" @click.prevent="removeDomain(index,innerIndex)"><i class="el-icon-delete"></i></el-button>
                            </el-col>
                        </el-row>
                        <el-button type="text" @click="addCourse(index)" v-if="!item.status" class="addBtn"><i class="el-icon-plus"></i> 添加课程</el-button>
                    </div>
                    <el-row :gutter="20">
                        <el-col :span="5" :offset="6">
                            <el-button type="text" @click="addUnit" class="addMore"><i class="el-icon-plus"></i> 添加单元</el-button>
                        </el-col>
                    </el-row>
                </div>
            </div>
            <el-row>
                <el-col class="footer">
                    <el-button @click="resetForm">返 回</el-button>
                    <el-button @click="submitForm('ruleForm')" type="primary" class="left">保 存</el-button>
                </el-col>
            </el-row>
        </el-form>
        
    </div>
</template>
<script>
import Levelbar from '../layout/Levelbar';
// import {getGrade} from 'api/classAll';
import Tinymce from 'components/Tinymce';
import fileUpload from 'components/Upload/fileUpload';
import { mapGetters } from 'vuex';
import { listSubjects, save } from 'api/schoolResources';
export default {
    name: 'correct',
    components: { Levelbar, fileUpload, Tinymce},
    data() {
        return {
            loading: false,
            listSubjects: [],
            gradeList: [
                {
                    name: '一年级',
                    id: '1'
                },
                {
                    name: '二年级',
                    id: '2'
                },
                {
                    name: '三年级',
                    id: '3'
                },
                {
                    name: '四年级',
                    id: '4'
                },

                {
                    name: '五年级',
                    id: '5'
                },
                {
                    name: '六年级',
                    id: '6'
                },
                {
                    name: '七年级',
                    id: '7'
                },
                {
                    name: '八年级',
                    id: '8'
                },
                {
                    name: '九年级',
                    id: '9'
                },
                {
                    name: '十年级',
                    id: '10'
                },
                {
                    name: '十一年级',
                    id: '11'
                },
                {
                    name: '十二年级',
                    id: '12'
                }
            ],
            studyYearList: [
                {
                    name: '全学年',
                    id: '0'
                },
                {
                    name: '上学年',
                    id: '1'
                },
                {
                    name: '下学年',
                    id: '2'
                }
            ],
            ruleForm: {
                getGradeName: [],
                subjects: '',
                studyYear: '', // 标题
                type: '', // 类别
                createPeople: '', // 发布者
                link: '',
                showType: '0',
                typeArr: [], // 编辑分类
                teachingList: [
                    {
                        unitName: '第1单元',
                        status: false,
                        chapters: [
                            {
                                chapterName: '课程1'
                            }
                        ]
                    }
                ]
            },
            rules: {
                title: [
                      { required: true, message: '请输入教材名称'},
                      { pattern: /^[^\s]+$/, message: '请勿输入空格', trigger: 'blur' }
                ],
                getGradeName: [
                     { required: true, type: 'array', message: '请选择年级', trigger: 'change'}
                ],
                // 发布者
                studyYear: [
                      { required: true, message: '请选择学年', trigger: 'change'}
                ],
                subjects: [
                      { required: true, message: '请选择学科', trigger: 'change'}
                ]
            }
        }
    },
    created() {
        this.queryListSubjects();
    },
    computed: {
        ...mapGetters([
            'uid',
            'schoolId',
            'schoolName'
        ])
    },
    methods: {
        submitForm(ruleForm) {
            if (this.ruleForm.teachingList.some(item => item.status == false)) {
                this.$message.info('请先保存单元')
                return;
            }
            this.$refs[ruleForm].validate((valid) => {
                if (valid) {
                    this.$confirm('确定要保存吗?', ' ', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消'
                    }).then(() => {
                        // this.loading=true;
                        let bookName = this.listSubjects.find(item => {
                            return item.subjectKey == this.ruleForm.subjects
                        }).subjectName;
                        save(this.schoolId, this.ruleForm.title, this.ruleForm.subjects, bookName, this.ruleForm.studyYear, this.ruleForm.getGradeName, this.ruleForm.teachingList).then(res => {
                            this.$message.success('保存成功');
                            this.$router.go(-1);
                        })
                    });
                } else {
                    return false;
                }
            });
        },
        // 学科列表
        queryListSubjects() {
            listSubjects().then(response => {
                this.listSubjects = response.data.content;
            });
        },
        addCourse(index) {
            let length = 0;
            this.ruleForm.teachingList.forEach(item => {
                length += item.chapters.length
            })
            if (length>=120) {
                this.$message.info('单个教材下最多可创建120个课程');
                return;
            }
            if (this.ruleForm.teachingList[index].chapters.length>=20) {
                this.$message.info('一个单元最多可添加20个课程');
                return;
            }
            this.ruleForm.teachingList[index].chapters.push(
                {
                    chapterName: '课程' + (this.ruleForm.teachingList[index].chapters.length+1)
                }
            );
        },
        removeDomain(index, innerIndex) {
            this.ruleForm.teachingList[index].chapters.splice(innerIndex, 1);
        },
        saveUnit(index) {
            if (this.ruleForm.teachingList[index].chapters.some(item => !item.chapterName) || !this.ruleForm.teachingList[index].unitName) {
                this.$message.info('请填写完整本单元数据');
                return;
            }
            this.ruleForm.teachingList[index].status = true;
        },
        deleteUnit(index) {
            this.$confirm('确定要删除本单元吗?', ' ', {
                confirmButtonText: '确定',
                cancelButtonText: '取消'
            }).then(() => {
                this.ruleForm.teachingList.splice(index, 1);
            }).catch(() => {
                this.$message.info('已取消')
            });
        },
        editUnit(index) {
            //console.log(this.ruleForm.teachingList, 'sssss')
            this.ruleForm.teachingList[index].status = false;
        },
        addUnit() {
            if (this.ruleForm.teachingList.some(item => item.status == false)) {
                this.$message.info('请先保存单元')
                return;
            }
            if (this.ruleForm.teachingList.length>=20) {
                this.$message.info('最多添加20个单元')
                return;
            }
            this.ruleForm.teachingList.push(
                {
                    unitName: `第${this.ruleForm.teachingList.length+1}单元`,
                    status: false,
                    chapters: [
                        {
                            chapterName: '课程1'
                        }
                    ]
                }
            )
        },
        // 返回
        resetForm(dataForm) {
            this.$router.go(-1)
        }
    }
}
</script>

<style lang="scss" scoped>
$bgcolor: #fff;

 @mixin showTitle() {
    background: $bgcolor;
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
}
.app-container {
    position: relative;
    padding: 20px 20px 10px;
    .app-levelbar {
        height: 35px;
    }
    .el-form {
       .form-item-title {
            margin: 40px 0;
            font-size: 14px;
            color: #333;
            line-height: 14px;
            border-left: 4px solid #ff5e2c;
            text-indent: 16px;
        }
    }
    
}
.delBtn {
    font-size: 20px;
    color:#999;
}
.addBtn{
    margin:0px 0 0px 12px;
    font-size: 12px;
    color: #ff5e2c;
}
.addMore{
    margin-top:40px;
    font-size: 18px;
    color: #ff5e2c;
}
.btn{
    margin-left:25px;
    width: 8%;
}
.teaching{
    margin-top:50px;
}
.form-box {
        padding: 0px 50px 0;
        @include showTitle();
        .form-item {
        padding-bottom: 40px;
        }
        .form-title {
           padding-top:8px;
            text-align: center;
            font-size: 18px;
            color: #333;
            line-height: 72px;
            font-weight: bold;
            font-family: Microsoft YaHei;
            border-bottom: 1px solid #ddd;
        }
        .footer {
            text-align: center;
            margin-bottom: 60px;
            margin-top:40px;
        }
}
.uploadImg 
{
    margin-bottom:30px;
    span{
       font-size: 14px;
       color: #333;
       padding-left:6px;
      
    }
}
.left{
    margin-left:30px;
}
.link-box{
    margin-top:20px;
}
</style>
